<template>   
  <div >
    <img src="../../static/image/login.jpeg" class="back">
      <div class="loginStyle">
        <div style="margin: 35px;">
          <el-form v-model="loginForm" style="text-align: center">
            <div >
              <el-input  type="text" v-model="loginForm.name" placeholder="用户名" autocomplete="off"></el-input>
            </div>
            <div>
              <br/>
              <el-input type="password" v-model="loginForm.passWord" placeholder="密码" autocomplete="off"></el-input>
            </div>
            <br/>
            <el-button round @click="submit" type="success"  style="text-align: center;width: 200px">登陆</el-button>
          </el-form>

        </div>

      </div>

    </div>

  </div>
</template>

<style>
  .el-input{
    width:200px;
    outline:none;
    border:1px solid #ffe9a2;
    border-radius:3px;
    font-size:1.4em;
    outline:0;
    color:#986655;
  }
  .back{
/*
    background-size: contain;
*/
    width: 100%;
    height: 100%;
  }

  .loginStyle{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;

    width: 330px;
    height: 280px;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#1583f3), to(#e6e3ff), color-stop(.1, #4e82ff));
    border-top: 2px solid #0152cc;
    border-right: 1px solid #1c67cc;
    border-left: #479eff;
    -webkit-border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: 3px 2px 2px rgba(79, 255, 252, 0.2);
    /*
        border:3px solid #76f8ff;
    */
    box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
  }
</style>

<script>

    export default {
        data() {
            return {
              backgroundDiv: {
/*
                backgroundImage:'url("../../static/image/login.jpeg")',
*/
                backgroundImage:"url(" + require("../../static/image/login.jpeg") + ")",
              },

              loginForm:{
                name:'',
                passWord:'',
                id:'',
              }

            }
        },
      methods:{
          submit:function () {
            this.$axios.post("/api/userLogin",this.loginForm).then(Response=>{
                  if (Response.data.code =="0"){
                    console.log(Response.data.obj);
                    window.sessionStorage.setItem("username",Response.data.obj.name);
                    window.sessionStorage.setItem("EmployeeID",Response.data.obj.id);
                    this.$router.push({path: '/AppBar'});
                  } else {
                    this.$notify({
                      message: Response.data.msg,
                      duration: 1000
                    });
                  }
            })
          }
      }
    }

</script>
